import { FC, useMemo } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useCatch } from '@/hooks';
import IotServices from '@/api/services/iotServices.ts';

type Props = {
  carNo?: string;
};

const LiveVideoC: FC<Props> = ({ carNo }) => {
  const catchFn = useCatch();

  const { data } = useQuery({
    queryKey: ['equipmentList', carNo],
    queryFn: () => catchFn(() => IotServices.getEquipmentList({ carNo: carNo! })),
    select: ({ data }) => data,
    enabled: !!carNo,
    staleTime: 0,
  });

  const url = useMemo(() => {
    if (!data) return '';
    const item = data?.[0];
    return `https://tc.wvp.uconcern.com:8080/#/play/wasm/wss%3A%2F%2Ftc.wvp.uconcern.com%3A1443%2Frtp%2F${item?.equipmentId}_${item?.channel}.live.flv`;
  }, [data]);

  return <>{url && <iframe style={{ width: '100%', height: '100%' }} src={url} />}</>;
};

export default LiveVideoC;
